<template>
  <div class="MatchDetail">
    <div class="detailLeft">
      <div class="Content">
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              赛事名称：
              <b style="margin-left: 29px">{{ MatchCheck.name }}</b>
            </div>
          </div>
          <div class="ContentText">
            裁判长：
            <b style="margin-left: 45px">{{
              MatchCheck.ref_id.get_user ? MatchCheck.ref_id.get_user.name : ""
            }}</b>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              主办单位：
              <b style="margin-left: 29px">{{ MatchCheck.host }}</b>
            </div>
          </div>
          <div
            style="display: block; flex: 1; margin-left: 1%; margin-bottom: 3%"
          >
            <div class="ContentText" v-for="item in unitList" :key="item.id">
              <!-- 承办单位： -->
              <!-- {{item.title}} -->
              <input
                type="text"
                :value="item.title"
                style="
                  outline: none;
                  border: none;
                  max-width: 71px;
                  color: #2c3e50;
                  background-color: #fff;
                "
                :disabled="isDisable"
              />
              <!-- <b style="margin-left:30px;">{{ Array.isArray(MatchCheck.assist) ? MatchCheck.assist.join(',') : MatchCheck.assist }}</b> -->
              <b style="margin-left: 30px"
                ><input
                  type="text"
                  :value="item.content"
                  :disabled="isDisable"
                  style="
                    color: #2c3e50;
                    font-weight: 600;
                    width: auto;
                    outline: none;
                    border: none;
                    background-color: #fff;
                  "
              /></b>
              <b style="margin-left: 5px; cursor: pointer;" @click="editText(item.id)"><i class="el-icon-edit"></i></b>
              <b
                style="margin-left: 5px; color: red; cursor: pointer;"
                @click="deleteText(item.id)"
                ><i class="el-icon-delete"></i></b
              >
            </div>
            <div
              style="margin-right: 20%;color:#aaa; cursor: pointer; width:88px;"
              class="ContentText"
              @click="editText(null)"
            >
              新增组织机构
            </div>
          </div>
        </div>
        <el-dialog
          title="删除"
          :visible.sync="dialogVisibleDelete"
          width="30%"
        >
          <span>是否确定删除？</span>

          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="handleDelete">删除</el-button>
            <el-button @click="dialogVisibleDelete = false">取消</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="编辑"
          :visible.sync="dialogVisible_"
          width="30%"
        >
          <!-- <span>编辑</span> -->
          <div style="margin-bottom: 10px">
            <!-- <span>请输入标题</span><input type="text" v-model="unitTitle"> -->
            <el-input
              v-model="unitTitle"
              width="500px"
              placeholder="请输入组织机构抬头"
            ></el-input>
          </div>
          <div>
            <!-- <input type="text" v-model="unitContent"> -->
            <el-input
              v-model="unitContent"
              width="500px"
              placeholder="请输入组织机构名称"
            ></el-input>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="CloseDialog">取消</el-button>
          </span>
        </el-dialog>
        <div class="ContentBox">
          <div class="ContentText">
            比赛地点：
            <b style="margin-left: 30px">{{ MatchCheck.address }}</b>
          </div>
          <div class="ContentText">
            赛事联络人：
            <b style="margin-left: 18px">{{ MatchCheck.major }}</b>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              报名开始时间：
              <b>{{ MatchCheck.apply_start_time }}</b>
            </div>
          </div>
          <div class="ContentText">
            <div>
              比赛开始时间：
              <b>{{ MatchCheck.start_time }}</b>
            </div>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              报名截止时间：
              <b>{{ MatchCheck.end_time }}</b>
            </div>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              退款总金额：
              <b style="margin-left: 13px">{{ MatchCheck.refund }} (元)</b>
            </div>
          </div>
          <div class="ContentText"></div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div style="width: 10%">项目-组别：</div>
            <el-card style="margin-left: 20px; margin-top: 5px">
              <el-table
                class="ref-table"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
              >
                <el-table-column
                  prop="id"
                  label="ID"
                  width="80"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="team" label="项目-组别" width="160">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.group }}
                      <span v-if="scope.row.group">-</span>
                      {{ scope.row.type }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="价格(元)"
                  width="80"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="报名信息" width="80">
                  <template slot-scope="scope">
                    <el-button
                      @click="SignClick(scope.row, scope.$index)"
                      type="text"
                      size="medium"
                      >查看</el-button
                    >
                  </template>
                </el-table-column>
                <el-table-column label="报名人数" width="80">
                  <template slot-scope="scope">
                    <p style="display: flex">
                      <span>{{ scope.row.count_num }}</span>
                      <span v-if="scope.row.limit">/{{ scope.row.limit }}</span>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column label="总金额" width="80">
                  <template slot-scope="scope">
                    <span
                      v-if="
                        scope.row.price === '' || !scope.row.count_num === ''
                      "
                    ></span>
                    <span
                      v-if="
                        scope.row.price !== '' && !scope.row.count_num !== ''
                      "
                      >{{
                        (
                          parseFloat(scope.row.price) *
                          parseInt(scope.row.count_num)
                        ).toFixed(2)
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <!--  v-if="MatchCheck.status == 2 || MatchCheck.status == 3" -->
                    <span
                      @click="modifyGroup(scope.row, scope.$index)"
                      v-if="MatchCheck.status == 2 || MatchCheck.status == 3"
                      style="color: red; cursor: pointer"
                      >修改</span
                    >
                    <span
                      @click="delGroup(scope.row, scope.$index)"
                      style="color: red; cursor: pointer"
                      >删除</span
                    >
                  </template>
                </el-table-column>
              </el-table>
              <div style="padding: 12px 0">
                <span style="margin-left: 10px">总计</span>
                <p
                  :style="{
                    float: 'right',
                    marginRight:
                      MatchCheck.status == 2 || MatchCheck.status == 3
                        ? '82px'
                        : '12px',
                  }"
                >
                  <span
                    style="
                      display: inline-block;
                      width: 90px;
                      text-align: center;
                    "
                    >{{ signall }} (人)</span
                  >
                  <span
                    style="
                      display: inline-block;
                      width: 90px;
                      text-align: center;
                    "
                    >{{ total }} (元)</span
                  >
                </p>
              </div>
              <el-button
                type="primary"
                size="midium"
                round
                style="
                  margin-top: 20px;
                  width: 150px;
                  transform: translateX(130%);
                "
                class="Btn"
                @click="addGroupVisible = true"
              >
                添加项目/组别
              </el-button>
            </el-card>
          </div>
        </div>
        <div
          class="Match-referee-title ContentBox"
          v-if="MatchCheck.status != 0 && MatchCheck.status != 1"
          style="margin-bottom: 10px"
        >
          <div class="ref-title">赛事裁判员:</div>
          <a :href="blankReferee_export_url" download="裁判表"
            ><el-button
              type="primary"
              size="medium"
              style="margin-left: 40px"
              round
              >导出空白裁判表</el-button
            ></a
          >
          <el-button
            type="primary"
            @click="dialogVisible = true"
            size="meduim"
            style="margin-left: 30px"
            round
            >添加裁判员</el-button
          >
          <div style="margin-left: 40px">
            <el-upload
              action="string"
              :show-file-list="false"
              :http-request="uploadExcel"
              ><el-button type="primary" size="meduim" round
                >批量添加裁判员</el-button
              ></el-upload
            >
          </div>
          <a :href="refereeInfo_export_url" download="裁判员信息"
            ><el-button
              type="primary"
              size="meduim"
              style="margin-left: 40px"
              round
              >导出裁判员</el-button
            ></a
          >
          <el-dialog
            title="添加比赛裁判"
            :visible.sync="dialogVisible"
            width="30%"
            style="margin-top: 10%"
          >
            <div style="width: 60%">
              <span>请输入裁判员手机号或姓名进行选择</span>
              <div style="margin-bottom: 10px"></div>
              <el-select
                v-model="referee_id"
                filterable
                remote
                reserve-keyword
                size="small"
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="searchingRef"
              >
                <el-option
                  @click="pushList(index)"
                  v-for="item in search_refereeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <el-collapse v-model="showAddReferee">
              <el-collapse-item title="新增裁判员" name="1">
                <el-form
                  label-position="left"
                  label-width="100px"
                  :model="AddReferee"
                  size="small"
                  style="width: 80%; margin-left: 20px"
                >
                  <el-form-item label="姓名："
                    ><el-input
                      v-model="AddReferee.name"
                      maxlength="20"
                    ></el-input
                  ></el-form-item>
                  <el-form-item label="身份证号："
                    ><el-input
                      v-model="AddReferee.id_card"
                      maxlength="18"
                    ></el-input
                  ></el-form-item>
                  <el-form-item label="电话号码："
                    ><el-input
                      v-model="AddReferee.phone"
                      maxlength="11"
                    ></el-input
                  ></el-form-item>
                </el-form>
              </el-collapse-item>
            </el-collapse>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisibleClick"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
        <div
          class="ContentBox"
          v-if="MatchCheck.status != 0 && MatchCheck.status != 1"
        >
          <div class="ContentText">
            <div style="width: 10%"></div>
            <el-card
              class="box-card"
              style="margin-left: 20px; margin-top: 5px"
            >
              <el-table :data="refereeInfo" max-height="520" class="ref-table">
                <el-table-column
                  prop="key"
                  label="序号"
                  width="60"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="裁判姓名"
                  width="100"
                ></el-table-column>
                <el-table-column
                  prop="phone"
                  label="手机号"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="salt"
                  label="登陆密码"
                  width="120"
                ></el-table-column>
                <el-table-column
                  prop="id_card"
                  label="身份证号码"
                  width="180"
                ></el-table-column>
                <el-table-column label="操作" width="160">
                  <template slot-scope="scope">
                    <div style="display: flex">
                      <el-button
                        style="color: #f54221"
                        v-if="scope.row.is_del == 0"
                        @click.native.prevent="
                          deleteRow(scope.$index, refereeInfo)
                        "
                        type="text"
                        size="small"
                      >
                        取消执裁
                      </el-button>
                      <el-button
                        style="color: #ff8200"
                        v-if="scope.row.is_del == 1"
                        type="text"
                        size="small"
                        >执裁结束</el-button
                      >
                      <span v-if="scope.row.is_del == 2">
                        <el-button
                          style="color: #ffbd00"
                          type="text"
                          size="small"
                          @click.native.prevent="deleteCheck(scope.row.id, 0)"
                          >审核</el-button
                        >
                        <el-button
                          style="color: #579c00"
                          type="text"
                          size="small"
                          @click.native.prevent="deleteCheck(scope.row.id, 3)"
                          >驳回</el-button
                        >
                      </span>
                      <el-button
                        style="color: #128aa1"
                        v-if="scope.row.is_del == 3"
                        type="text"
                        size="small"
                        ><span>已驳回</span></el-button
                      >
                      <el-button
                        style="color: #f54221"
                        @click.native.prevent="
                          deleteRef(scope.row.id, scope.$index)
                        "
                        type="text"
                        size="small"
                        >删除</el-button
                      >
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div style="display: flex">
              报名必填信息：
              <div style="display: flex">
                <div v-for="item in SignUpInfo" style="margin-left: 25px">
                  <b>{{ item }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ContentBox"
          v-if="MatchCheck.type == 3 && MatchCheck.com_score"
        >
          <div class="ContentText">
            <div>本次比赛积分：</div>
            <el-card class="box-card">
              <div id="4" class="lineBox">
                <div class="inputBox">
                  <div
                    class="pointsInput"
                    v-for="(input4, index) in pointsInputs4"
                  >
                    <div class="pointsIndex">{{ index + 1 }}</div>
                    <el-input
                      v-model="pointsInputs4[index]"
                      maxlength="5"
                      size="small"
                      :disabled="true"
                      clearable
                      style="width: 150px; margin-left: 10px"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div id="8" class="lineBox">
                <div class="inputBox">
                  <div
                    class="pointsInput"
                    v-for="(input8, index) in pointsInputs8"
                  >
                    <div class="pointsIndex">{{ index + 5 }}</div>
                    <el-input
                      v-model="pointsInputs8[index]"
                      maxlength="5"
                      size="small"
                      :disabled="true"
                      clearable
                      style="width: 150px; margin-left: 10px"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div id="16" class="lineBox">
                <div class="inputBox">
                  <div
                    class="pointsInput"
                    v-for="(input16, index) in pointsInputs16"
                  >
                    <div class="pointsIndex">{{ index + 9 }}</div>
                    <el-input
                      v-model="pointsInputs16[index]"
                      maxlength="5"
                      size="small"
                      :disabled="true"
                      clearable
                      style="width: 150px; margin-left: 10px"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div id="32" class="lineBox">
                <div class="inputBox">
                  <div
                    class="pointsInput"
                    v-for="(input32, index) in pointsInputs32"
                  >
                    <div class="pointsIndex">{{ index + 17 }}</div>
                    <el-input
                      v-model="pointsInputs32[index]"
                      maxlength="5"
                      size="small"
                      :disabled="true"
                      clearable
                      style="width: 150px; margin-left: 10px"
                    ></el-input>
                  </div>
                </div>
              </div>
              <div id="64" style="width: 100%; display: flex; margin-top: 10px">
                <div style="width: 100%; display: flex">
                  <div class="pointsInput">
                    <div class="pointsIndex">33-64</div>
                    <el-input
                      v-model="pointsInputs64[0]"
                      maxlength="5"
                      size="small"
                      :disabled="true"
                      clearable
                      style="width: 150px; margin-left: 10px"
                    ></el-input>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改赛事信息dialog -->
    <el-dialog title="修改赛事信息" :visible.sync="modifybol" width="60%">
      <div class="modifyconent">
        <div class="ContentBox">
          <div class="ContentText">
            赛事logo：
            <el-upload
              :action="actionImg"
              :headers="myHeaders"
              list-type="picture-card"
              :limit="1"
              :on-success="imgUploadSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <!-- <i class="el-icon-plus"></i> -->
              <img
                v-if="!ImgUrl"
                style="width: 100%; height: 100%"
                :src="MatchCheck.logo"
                alt=""
              />
            </el-upload>
            <el-dialog :visible.sync="actionImgBool"
              ><img width="100%" :src="dialogImageUrl" alt=""
            /></el-dialog>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              赛事名称：
              <el-input
                :placeholder="MatchCheck.name"
                suffix-icon="el-icon-edit el-input__icon"
                v-model="matchInfo.name"
                clearable
                size="small"
                style="width: 220px"
              ></el-input>
            </div>
          </div>
          <div class="ContentText">
            裁判长：
            <el-input
              v-model="MatchReferee"
              maxlength="11"
              placeholder="请输入联系方式"
              style="width: 154px"
            ></el-input>
            <div style="width: 20%; line-height: 42px; margin-left: 5%">
              {{ RefereeName }}
            </div>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div style="position: relative">
              主办单位：
              <el-input
                :placeholder="MatchCheck.host"
                suffix-icon="el-icon-edit el-input__icon"
                v-model="matchInfo.host"
                clearable
                size="small"
                style="width: 220px"
              ></el-input>
              <el-tooltip
                placement="top"
                style="position: absolute; top: 9px; right: -18px"
              >
                <div slot="content">如有多个请用英文逗号隔开</div>
                <i class="el-icon-warning"></i>
              </el-tooltip>
            </div>
          </div>
          <div class="ContentText">
            承办单位：
            <el-input
              :placeholder="MatchCheck.assist"
              suffix-icon="el-icon-edit el-input__icon"
              v-model="matchInfo.assist"
              clearable
              size="small"
              style="width: 220px"
            ></el-input>
            <el-tooltip placement="top" style="margin-left: 5px">
              <div slot="content">如有多个请用英文逗号隔开</div>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            比赛地点：
            <el-input
              :placeholder="MatchCheck.address"
              suffix-icon="el-icon-edit el-input__icon"
              v-model="matchInfo.address"
              clearable
              size="small"
              style="width: 220px"
            ></el-input>
          </div>
          <div class="ContentText">
            赛事联络人：
            <el-input
              :placeholder="MatchCheck.major"
              suffix-icon="el-icon-edit el-input__icon"
              v-model="matchInfo.major"
              clearable
              size="small"
              style="width: 206px"
            ></el-input>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            <div>
              报名开始时间：
              <el-date-picker
                style="width: 188px"
                v-model="matchInfo.apply_start_time"
                type="datetime"
                :placeholder="MatchCheck.apply_start_time"
                format="yyyy - MM - dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </div>
          <div class="ContentText">
            <div>
              比赛开始时间：
              <el-date-picker
                style="width: 188px"
                v-model="matchInfo.start_time"
                type="datetime"
                :placeholder="MatchCheck.start_time"
                format="yyyy - MM - dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </div>
        </div>

        <div class="ContentBox">
          <div class="ContentText">
            <div>
              报名截止时间：
              <el-date-picker
                style="width: 188px"
                v-model="matchInfo.end_time"
                type="datetime"
                :placeholder="MatchCheck.end_time"
                format="yyyy - MM - dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </div>
        </div>
        <div class="ContentBox">
          <div class="ContentText">
            上传竞赛规程 ：
            <el-upload
              class="upload-demo"
              :action="actionFile"
              :headers="myHeaders"
              :on-change="handleChange"
              :limit="1"
              :before-upload="beforeAvatarUpload_pdf"
              :on-success="fileUploadSuccess_pdf"
              :file-list="PdfList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传pdf文件，且不超过20MB(只能上传单个pdf)
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifybol = false">取 消</el-button>
        <el-button type="primary" @click="comformModify">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改项目组别dialog -->
    <el-dialog title="修改项目组别" :visible.sync="modifyGroupBol" width="40%">
      <div class="modifyGroupBox" style="width: 75%; margin: 0 auto">
        <div class="demo-input-suffix">
          组别名称：{{ modifyGroupObj.group }}
          <span v-if="modifyGroupObj.group">-</span>
          {{ modifyGroupObj.type }}
        </div>
        <div class="demo-input-suffix">
          年龄限制：
          <el-date-picker
            v-model="modifyGroupObj.age"
            format="yyyy - MM - dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="最小年龄"
            end-placeholder="最大年龄"
            style="width: 282px"
          ></el-date-picker>
        </div>
        <div class="demo-input-suffix">
          人数限制：
          <el-input
            style="width: 150px"
            placeholder="请输入人数限制"
            clearable
            suffix-icon="el-icon-edit el-input__icon"
            v-model="modifyGroupObj.limit"
          ></el-input>
        </div>
        <div class="demo-input-suffix">
          报名价格：
          <el-input
            style="width: 150px"
            placeholder="请输入报名价格"
            clearable
            suffix-icon="el-icon-edit el-input__icon"
            v-model="modifyGroupObj.price"
          ></el-input>
          <el-tooltip placement="top">
            <div slot="content">输入的数字必须大于零,默认0.01</div>
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyGroupBol = false">取 消</el-button>
        <el-button type="primary" @click="comformModifyGroup">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增项目组别dialog -->
    <el-dialog title="新增项目组别" :visible.sync="addGroupVisible" width="60%">
      <el-form v-model="addForm" :rules="addRule" label-width="100px">
        <el-form-item label="自定义组别:" prop="group"
          ><el-input
            v-model="addForm.group"
            width="500px"
            placeholder="请输入自定义组别名称"
          ></el-input
        ></el-form-item>
        <el-form-item label="项目类型:" prop="group_list">
          <el-radio v-model="addForm.group_list" label="男单"></el-radio>
          <el-radio v-model="addForm.group_list" label="女单"></el-radio>
          <el-radio v-model="addForm.group_list" label="单打"></el-radio>
          <el-radio v-model="addForm.group_list" label="男双"></el-radio>
          <el-radio v-model="addForm.group_list" label="女双"></el-radio>
          <el-radio v-model="addForm.group_list" label="混双"></el-radio>
          <el-radio v-model="addForm.group_list" label="双打"></el-radio>
          <el-radio v-model="addForm.group_list" label="男团"></el-radio>
          <el-radio v-model="addForm.group_list" label="女团"></el-radio>
          <el-radio v-model="addForm.group_list" label="混团"></el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGroupVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroup">确 定</el-button>
      </span>
    </el-dialog>
    <div class="detailright">
      <div v-if="MatchCheck.status != 5">
        <el-button
          type="warning"
          size="medium"
          class="Btn"
          @click="modifyInfoBtn"
          v-if="MatchCheck.status == 2 || MatchCheck.status == 3"
          >修改赛事信息</el-button
        >
        <a
          style="width: 100%; margin-bottom: 20px"
          :href="blankUrl"
          @click="opens"
          v-loading="loading"
          download="赛事列表"
        >
          <el-button
            type="primary"
            size="medium"
            style="width: 100%; margin-bottom: 20px"
            >导出空白报名表</el-button
          >
        </a>
        <el-button
          type="primary"
          size="medium"
          class="Btn"
          @click="CheckSignInfo"
          >查看报名信息</el-button
        >
        <el-badge :value="notice" class="item Btn">
          <el-button style="width: 100%" type="primary" size="medium">
            <input
              type="file"
              @change="goUploadNotice($event)"
              class="upload_file"
            />
            上传通知
          </el-button>
        </el-badge>
        <el-button
          type="primary"
          size="medium"
          class="Btn"
          @click="live"
          v-if="userType == 5"
          >大屏控制</el-button
        >
      </div>
      <el-button
        type="primary"
        size="medium"
        class="Btn"
        @click="matchRules(MatchCheck.status)"
        >竞赛规程</el-button
      >
      <el-button type="primary" size="medium" class="Btn" @click="toMatchLog"
        >赛事操作日志</el-button
      >
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "MatchDetail",
  inject: ["reload"],
  data() {
    return {
      refereePhoneOrNameData: "",
      dialogVisible: false, //dialog弹出框
      addGroupVisible: false, //新增赛事组别对话框
      addForm: {
        group: "",
        group_list: "",
      },
      addRule: {
        group_list: [
          { required: true, message: "请选择项目类型", trigger: "change" },
        ],
      },
      modifybol: false,
      search_refereeList: [],
      refereeInfo: [],
      refInfo: {},
      referee_id: "",
      indexData: 0,
      arrData: [], //索引下标
      loading: false,
      searchingRef: false,
      dialogDevelop: false,
      showAddReferee: [], //裁判折叠
      AddReferee: {
        //裁判添加输入框
        name: "",
        id_card: "",
        phone: "",
      },
      delete_referee_index: 0,
      matchInfo: {
        name: "",
        get_user_name: "",
        host: "",
        assist: "",
        address: "",
        major: "",
        apply_start_time: "",
        start_time: "",
        end_time: "",
      },
      ReferName: "",
      ReferId: "",
      MatchReferee: "",
      modifyGroupBol: false,
      modifyGroupObj: {
        groupName: "",
        age: "",
        limit: "",
        price: "",
      },
      dialogImageUrl: "",
      actionImgBool: false,
      PdfList: [],
      fileUrl: "",
      ImgUrl: "",
      fileUrls: "",
      unitList: [],
      isDisable: true,
      dialogVisible_: false,
      dialogVisibleDelete: false,
      unitTitle: "",
      unitContent: "",
      currentTextID: "",
      isAdd: false,
    };
  },
  watch: {
    MatchCheck(val) {
      this.refereeInfo = val.referee;
    },
  },
  created() {
    this.$store.dispatch("getMatchCheck", this.$route.query.MatchId);
  },
  mounted() {
    this.get_unit();
  },
  computed: {
    ...mapState({
      MatchCheck: "MatchCheck",
    }),
    myHeaders() {
      return {
        token: this.Token,
      };
    },
    actionImg() {
      return `${this.$axios.defaults.baseURL}/event/img`;
    },
    actionFile() {
      return `${this.$axios.defaults.baseURL}/event/file`;
    },
    userType() {
      return window.sessionStorage.getItem("user_type");
    },
    RefereeName(val) {
      if (this.MatchReferee.length == 11) {
        var _this = this;
        this.$axios
          .post(
            "/event/gain_ref",
            {
              phone: this.MatchReferee,
            },
            {
              headers: {
                token: this.Token,
              },
            }
          )
          .then(function (res) {
            if (res.data.code == 400) {
              _this.$message({
                showClose: true,
                message: res.data.message,
                type: "error",
              });
            }
            if (res.data.code == 200) {
              _this.ReferName = res.data.data.get_user.name;
              _this.ReferId = res.data.data.id;
              return _this.ReferName;
            }
          })
          .catch(function (error) {});
      }
      return this.ReferName;
    },
    control() {
      return sessionStorage.getItem("user_type");
    },
    refereeInfo_export_url() {
      return (
        this.$axios.defaults.baseURL +
        "/Event/export_ref?com_id=" +
        this.$route.query.MatchId
      );
    },
    blankUrl: function () {
      return (
        this.$axios.defaults.baseURL +
        "/event/export_blank?com_id=" +
        this.$route.query.MatchId
      );
    },
    blankReferee_export_url() {
      return (
        this.$axios.defaults.baseURL.replace("api/v1", "") +
        "/裁判员导入模板.xls"
      );
    },
    SignUpInfo: function () {
      var info = this.$store.state.MatchCheck.require;
      return info;
    },
    Token() {
      return window.sessionStorage.getItem("token");
    },
    com_id() {
      return this.$route.query.matchId;
    },
    tableData: function () {
      var table = this.$store.state.MatchCheck.com_project;
      var tableArr = [];
      for (let i in table) {
        for (let j in table[i]) {
          tableArr.push(table[i][j]);
        }
      }
      return tableArr;
    },
    pointsInputs4: function () {
      let PI = this.$store.state.MatchCheckInputs;
      let PI4 = PI.PA.slice(0, 4);
      return PI4;
    },
    pointsInputs8: function () {
      let PI = this.$store.state.MatchCheckInputs;
      let PI8 = PI.PA.slice(4, 8);
      return PI8;
    },
    pointsInputs16: function () {
      let PI = this.$store.state.MatchCheckInputs;
      let PI16 = PI.PA.slice(8, 16);
      return PI16;
    },
    pointsInputs32: function () {
      let PI = this.$store.state.MatchCheckInputs;
      let PI32 = PI.PA.slice(16, 32);
      return PI32;
    },
    pointsInputs64: function () {
      let PI = this.$store.state.MatchCheckInputs;
      let PI64 = PI.PA.slice(33, 34);
      return PI64;
    },
    notice() {
      return this.MatchCheck.notice ? "be" : "";
    },
    signall() {
      let signall = null;
      for (let i = 0; i < this.tableData.length; i++) {
        signall += parseInt(this.tableData[i].count_num);
      }
      return signall;
    },
    total() {
      let total = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        let price = this.tableData[i].price ? this.tableData[i].price : 0;
        let count_num = this.tableData[i].count_num
          ? this.tableData[i].count_num
          : 0;
        total += parseFloat(price) * parseInt(count_num);
      }
      return total.toFixed(2);
    },
  },
  methods: {
    get_unit() {
      this.$axios
        .post(
          "/ComInfo/get_unit",
          {
            com_id: this.$route.query.MatchId,
          },
          {
            headers: {
              token: sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code === 2000) {
            this.unitList = res.data.data;
          } else if(res.data.code === 2001){
            this.unitList = res.data.data;
          }
          else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    handleSave() {
      if (this.isAdd) {
        this.$axios
          .post(
            "/ComInfo/add_unit",
            {
              com_id: this.$route.query.MatchId,
              title: this.unitTitle,
              content: this.unitContent,
            },
            {
              headers: {
                token: sessionStorage.getItem("token"),
              },
            }
          )
          .then((res) => {
            if (res.data.code === 2000) {
              this.$message({
                title: "自定义位置",
                message: res.data.msg,
                type: "success",
              });
              this.dialogVisible_ = false;
              this.get_unit();
              this.unitContent = "";
              this.unitTitle = "";
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error",
              });
            }
          });
      } else {
        this.$axios
          .post(
            "/ComInfo/edit_unit",
            {
              id: this.currentTextID,
              title: this.unitTitle,
              content: this.unitContent,
            },
            {
              headers: {
                token: sessionStorage.getItem("token"),
              },
            }
          )
          .then((res) => {
            if (res.data.code === 2000) {
              this.$message({
                title: "自定义位置",
                message: res.data.msg,
                type: "success",
              });
              this.dialogVisible_ = false;
              this.get_unit();
              this.unitContent = "";
              this.unitTitle = "";
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: "error",
              });
            }
          });
      }
    },
    handleDelete() {
      //
      this.$axios
        .post(
          "/ComInfo/delete_unit",
          {
            id: this.currentTextID,
          },
          {
            headers: {
              token: sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code === 2000) {
            this.$message({
              title: "自定义位置",
              message: res.data.msg,
              type: "success",
            });
            this.dialogVisibleDelete = false;
            this.get_unit();
          } else {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error",
            });
          }
        });
    },
    deleteText(id) {
      this.currentTextID = id;
      this.dialogVisibleDelete = true;
    },
    editText(id) {
      if (!id) this.isAdd = true;
      else {
        this.isAdd = false;
        const currentItem = this.unitList.filter(item=>{
        return id == item.id 
        })
        this.unitContent= currentItem[0].content
        this.unitTitle= currentItem[0].title
      }
      this.currentTextID = id;

      this.dialogVisible_ = true;
    },
    CloseDialog() {
      this.dialogVisible_ = false;
      this.unitContent = "";
      this.unitTitle = "";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //   赛事操作日志
    toMatchLog() {
      this.$router.push({
        path: "/Index/power/matchLog",
        query: {
          MatchId: this.$route.query.MatchId,
        },
      });
    },
    // 添加赛事组别
    addGroup() {
      let com_id = parseInt(this.$route.query.MatchId);
      let group = this.addForm.group;
      let type = this.addForm.group_list;
      console.log(typeof type);
      this.$axios
        .post(
          "/ComInfo/add_project",
          {
            com_id,
            group,
            type,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          this.$message.success(res.data.msg);
          setTimeout(() => {
            this.reload();
          }, 1000);
          this.addGroupVisible = false;
        });
    },
    handleChange(file, fileList) {
      this.PdfList = fileList.slice(-3);
    },
    beforeAvatarUpload_pdf(file) {
      const isPDF = file.type == "application/pdf";
      const isPDF20M = file.size / 1024 / 1024 < 20;
      if (!isPDF) {
        this.$message.error("上传竞赛规程只能是 pdf 格式!");
        file.slice(1);
      }
      return isPDF;
    },
    fileUploadSuccess_pdf(response, file, fileList) {
      this.fileUrls = response.data;
    },
    imgUploadSuccess(response, file, fileList) {
      this.ImgUrl = response.data;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.actionImgBool = true;
    },
    handleRemove(file, fileList) {},
    comformModifyGroup() {
      if (
        !this.modifyGroupObj.price ||
        parseFloat(this.modifyGroupObj.price) <= 0
      ) {
        this.$message({
          type: "info",
          message: "请输入正确的报名价格",
        });
        return;
      }
      let age = this.modifyGroupObj.age
        ? this.modifyGroupObj.age.join(",")
        : this.modifyGroupObj.age;
      this.$axios
        .post(
          "OrderManage/edit_project_info",
          {
            id: this.modifyGroupObj.id,
            age: age,
            limit: this.modifyGroupObj.limit,
            price: this.modifyGroupObj.price,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          const { code, data, message } = res.data;
          this.modifyGroupBol = false;
          this.modifybol = false;
          if (code == 2000) {
            this.$nextTick(() => {
              this.tableData[
                this.modifyGroupObj.index
              ].price = this.modifyGroupObj.price;
              this.tableData[
                this.modifyGroupObj.index
              ].limit = this.modifyGroupObj.limit;
              this.$message({
                type: "success",
                message: "修改成功",
              });
            });
          } else {
            this.$message({
              type: "error",
              message: message,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    modifyGroup(row, index) {
      this.modifyGroupBol = true;
      this.modifyGroupObj = JSON.parse(JSON.stringify(row));
      this.modifyGroupObj.index = index;
    },
    // 删除组别 longhao 2020年12月30日16:41:56
    delGroup(row, index) {
      let _this = this;
      _this
        .$confirm("此操作将永久删除该组别, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          _this.$axios
            .post(
              "ComInfo/delete_project",
              { com_id: _this.$route.query.MatchId, project_id: row.id },
              { headers: { token: window.sessionStorage.getItem("token") } }
            )
            .then((res) => {
              if (res.data.code == 2000) {
                _this.$message({
                  type: "success",
                  message: res.data.msg,
                });
                _this.reload();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.data.msg,
                });
              }
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    comformModify() {
      console.log(this.matchInfo);
      if (
        !this.matchInfo.name.trim() ||
        !this.matchInfo.host.trim() ||
        !this.matchInfo.address.trim() ||
        !this.matchInfo.major.trim()
      ) {
        this.$message({
          type: "info",
          message: "请输入正确的赛事信息",
        });
        return;
      }
      this.$axios
        .post(
          "/OrderManage/edit_event_info",
          {
            id: this.$route.query.MatchId,
            name: this.matchInfo.name,
            ref_id: this.ReferId ? this.ReferId : this.MatchCheck.ref_id.id,
            host: this.matchInfo.host,
            assist: this.matchInfo.assist,
            address: this.matchInfo.address,
            major: this.matchInfo.major,
            apply_start_time: this.matchInfo.apply_start_time,
            end_time: this.matchInfo.end_time,
            start_time: this.matchInfo.start_time,
            logo: !this.ImgUrl ? this.matchInfo.logo : this.ImgUrl,
            rule: !this.fileUrls ? this.matchInfo.rule : this.fileUrls,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          const { code, data, message } = res.data;
          this.modifybol = false;
          if (code == 2000) {
            this.MatchCheck.name = this.matchInfo.name;
            if (this.ReferId)
              this.MatchCheck.ref_id.get_user.name = this.ReferName;
            this.MatchCheck.host = this.matchInfo.host;
            this.MatchCheck.assist = this.matchInfo.assist;
            this.MatchCheck.address = this.matchInfo.address;
            this.MatchCheck.major = this.matchInfo.major;
            this.MatchCheck.apply_start_time = this.matchInfo.apply_start_time;
            this.MatchCheck.end_time = this.matchInfo.end_time;
            this.MatchCheck.start_time = this.matchInfo.start_time;
            this.$message({
              type: "success",
              message: "修改成功",
            });
            this.$router.go(0);
          } else {
            this.$message({
              type: "error",
              message: message,
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    modifyInfoBtn() {
      this.modifybol = true;
      this.matchInfo = JSON.parse(JSON.stringify(this.MatchCheck));
      this.matchInfo.get_user_name = JSON.parse(
        JSON.stringify(this.MatchCheck)
      ).ref_id.get_user.name;
    },
    live() {
      this.$router.push({
        path: "/index/match/live",
        query: {
          MatchId: this.$route.query.MatchId,
        },
      });
    },
    matchRules(flag) {
      this.$router.push({
        path: "/index/match/MatchRules",
        query: {
          MatchId: this.$route.query.MatchId,
          flag,
        },
      });
    },
    goUploadNotice(e) {
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      formData.append("boolean", this.$route.query.MatchId);
      formData.append("user_id", window.sessionStorage.getItem("user_id"));
      this.$axios
        .post("/event/file", formData, {
          headers: {
            token: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        })
        .catch((res) => {});
    },
    opens() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    uploadExcel(item) {
      let formData = new FormData();
      formData.append("refree_execl", item.file);
      formData.append("com_id", this.$route.query.MatchId);
      this.$axios
        .post("/event/refree_execl", formData, {
          headers: {
            token: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          let data = res.data.data;
          for (let item in data) {
            this.refereeInfo.unshift(data[item]);
          }
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
    },
    handleChange(file, fileList) {
      this.PdfList = fileList.slice(-3);
    },
    fileUploadSuccess(response, file, fileList) {
      this.fileUrl = response.data;
    },
    beforeAvatarUpload(file) {
      let a = file.name;
      const isExcel = a.substring(a.length - 4) == ".xls";
      const isExcel20M = file.size / 1024 / 1024 < 20;
      if (!isExcel) {
        this.$message.error("上传竞赛规程只能是 xls 格式!");
        file.slice(1);
      }
      return isExcel;
    },
    //移除裁判
    deleteRow(index, refereeInfo) {
      this.delete_referee_index = index;
      let refData = {
        is_edit: 1,
        id: refereeInfo[index].id,
      };
      this.api_referee_add(refData);
    },
    //远程搜索裁判
    remoteMethod(query) {
      this.searchingRef = true;
      this.$axios
        .get("/event/search_refree", {
          params: {
            search: query,
          },
          headers: {
            token: sessionStorage.getItem("token"),
          },
        })
        .then((result) => {
          let data = result.data.data;
          this.search_refereeList = data;
          this.searchingRef = false;
        });
    },
    //得到结果 推入列表
    pushList(index) {
      this.indexData = index;
      this.arrData = this.search_refereeList.slice(0);
      this.refereePhoneOrNameData =
        this.search_refereeList[index].name +
        "/" +
        this.search_refereeList[index].phone;
      this.referee_id = this.search_refereeList[index].id;
    },
    dialogVisibleClick() {
      let refData = {};
      refData.is_edit = 0;
      refData.com_id = this.$route.query.MatchId;
      refData.referee_id = this.referee_id;
      refData.is_del = 0;
      refData.create_time = Date.parse(new Date());
      if (
        this.AddReferee.name ||
        this.AddReferee.id_card ||
        this.AddReferee.phone
      ) {
        refData.is_edit = 2;
        refData.user_name = this.AddReferee.name;
        refData.id_card = this.AddReferee.id_card;
        refData.account = this.AddReferee.phone;
        refData.referee_id = 0;
      }
      this.api_referee_add(refData);
    },
    SignClick(row, index) {
      this.$router.push({
        path: "/index/match/MatchSignUp",
        query: {
          MatchId: this.$route.query.MatchId,
          teamId: row.id,
        },
      });
    },
    resultClick(row, index) {},
    goSignUp() {
      this.$router.push("/index/match/MatchSignUp");
    },
    goSchedule() {
      this.$router.push({
        path: "/index/match/schedule",
        query: {
          MatchId: this.$route.query.MatchId,
        },
      });
    },
    goCheckSchedule() {
      this.$router.push({
        path: "/index/match/checkSchedule",
        query: {
          MatchId: this.$route.query.MatchId,
        },
      });
    },
    CheckSignInfo() {
      this.$router.push({
        path: "/index/match/MatchSignUp",
        query: {
          MatchId: this.$route.query.MatchId,
        },
      });
    },
    open(message, title) {
      this.$alert(message, title, {
        confirmButtonText: "确定",
      });
    },
    deleteRef(id, index) {
      this.$axios
        .post(
          "/event/del_ref",
          {
            id: id,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.refereeInfo.splice(index, 1);
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            // this.$router.go(0)
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        })
        .catch((error) => {
          this.$router.go(0);
        });
    },
    deleteCheck(id, status) {
      this.$axios
        .post(
          "/event/audit_ref",
          {
            id: id,
            is_del: status,
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          }
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
            this.$router.go(0);
          } else {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
        })
        .catch((error) => {});
    },
    api_referee_add(refData) {
      this.$axios
        .post("/event/refree_add", refData, {
          headers: {
            token: window.sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (refData.is_edit == 1) {
              //删除
              this.refereeInfo.splice(this.delete_referee_index, 1);
            } else {
              //添加 搜索
              let new_Referee =
                refData.is_edit == 2
                  ? res.data.data
                  : this.arrData[this.indexData];
              this.refereeInfo.unshift(new_Referee);
            }
            this.open(res.data.message, "操作成功");
          } else {
            this.open(res.data.message, "操作失败");
          }
        });
    },
  },
};
</script>
<style scoped>
.demo-input-suffix {
  margin-bottom: 20px;
}

.upload_file {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.MatchDetail {
  width: 90%;
  margin-top: 30px;
  margin-left: 40px;
  display: flex;
}

.ref-table-content {
  width: 50%;
}

.detailLeft {
  width: 80%;
}

.ref-title {
  width: 10%;
  text-align: center;
  height: 34px;
  line-height: 34px;
  margin-left: 9%;
}

.border {
  border: 1px solid #909399;
  border-radius: 10px;
}

.detailright {
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: fixed;
  right: 0;
  margin-right: 5%;
}

.Content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 30px;
  flex-direction: column;
}

.ContentBox {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

.ContentText {
  display: flex;
  flex: 1;
  margin-left: 10%;
  margin-bottom: 3%;
  align-items: baseline;
}

.Btn {
  width: 100%;
  margin-bottom: 20px;
}

.box-card {
  width: 70%;
}

.lineBox {
  width: 100%;
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #bbbbbb;
}

.inputBox {
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}

.pointsInput {
  width: 25%;
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  margin-bottom: 10px;
}

.pointsIndex {
  width: 40%;
  text-align: center;
}

.radio {
  width: 30%;
  
}

.radioCheck {
  margin-top: 4%;
  margin-left: 10%;
}

.Match-referee-concent {
  width: 50%;
}
</style>
